<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .search {
        text-align: center;
    }
    
    input {
        width: 40px;
        height: 12px;
    }
    
    .table {
        position: relative;
        margin-top: 10px;
    }
    
    table {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    th,
    td {
        margin: 0;
        padding: 0;
        text-align: center;
        width: 100px;
    }
    
    th:nth-child(2n-1),
    td:nth-child(2n-1) {
        border: 1px solid #000;
    }
    
    th:nth-child(2n),
    td:nth-child(2n) {
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        width: 120px;
    }
</style>

<body>
    <div class="search">
        <span>按照价格查询:</span>
        <input type="text" class="start">
        <span>-</span>
        <input type="text" class="end">
        <button class="search-price">搜索</button>
        <span>按照商品名称查询: </span>
        <input type="text" class="product">
        <button class="search-pro">查询</button>
    </div>
    <div class="table">
        <table>
            <thead>
                <tr>
                    <th>id </th>
                    <th>产品名称</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    // 创建商品数组
    var data = [{
        id: 1,
        pname: '小米',
        price: 2899
    }, {
        id: 2,
        pname: 'oppo',
        price: 1699
    }, {
        id: 3,
        pname: '荣耀',
        price: 3299
    }, {
        id: 4,
        pname: '华为',
        price: 4999
    }, {
        id: 5,
        pname: 'vivo',
        price: 999
    }, ];
    // 1.获取HTML相应元素
    var tbody = document.querySelector('tbody');
    var search_price = document.querySelector('.search-price');
    var start = document.querySelector('.start');
    var end = document.querySelector('.end');
    var search_pro = document.querySelector('.search-pro');
    var product = document.querySelector('.product');
    // 2.把数据渲染到页面中
    function setData(data) {
        // 先清空原来tbody的数据
        tbody.innerHTML = '';
        data.forEach(function(value) {
            // console.log(value);
            var tr = document.createElement('tr');
            tr.innerHTML =
                `<td>${value.id}</td>
            <td>${value.pname}</td>
            <td>${value.price}</td>`
            tbody.appendChild(tr)
        })
    }
    setData(data);
    // 3.根据商品查询价格
    // 当我们点击查询按钮，就可以根据我们的商品价格去筛选数组里面的对象
    search_price.addEventListener('click', function() { //绑定点击事件
        // console.log(1);
        let newData = data.filter(function(value) {
                return value.price >= start.value && value.price <= end.value;
            })
            // console.log(newData);
            // 把筛选 出来的对象渲染到页面中
        setData(newData)
    });
    // 4.查询数组中唯一的元素，使用some方法更合适，查询结束立即退出循环，效率更高
    search_pro.addEventListener('click', function() {
        var arr = [];
        data.some(function(value) {
            if (value.pname === String(product.value)) {
                arr.push(value)
                return true
            }
        })
        setData(arr)
    })
</script>

</html>